<template>
    <div class="rightTwo">
        <ThemeTitle :title="title" />
        <div class="yuanList">
            <div v-for="(item, index) in yuanList" :key="index">
                <div>{{ item.name }}</div>
                <div>{{ item.value }}</div>
            </div>
        </div>
        <div id="yuanChart">
            <div class="leftContent">突发事件应急预案体系</div>
            <div class="rightCenterLine"></div>
            <div class="centerContent"></div>
            <div class="centerRightLine">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="rightContent">
                <div v-for="(item, index) in rightList" :key="index">
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle";
import { onMounted, ref, provide } from "vue";
import echarts from "echarts";
export default {
    components: {
        ThemeTitle,
    },

    setup() {
        const title = provide("title", "预案管理");
        const centerList = [
            { name: "总体应急预案" },
            { name: "专项应急预案" },
            { name: "应急保障预案" },
            { name: "大型活动应急预案" },
            { name: "部门应急预案" },
            { name: "单位应急预案" },
        ];
        const yuanList = [
            { name: "已收录预案", value: "340" },
            { name: "省级预案", value: "105" },
            { name: "市县级预案", value: "23" },
        ];
        const rightList = [
            { name: "自然灾害类" },
            { name: "事故灾难类" },
            { name: "社会安全类" },
            { name: "公共卫生类" },
        ];
        function drawChart() {
            var dom = document.getElementById("yuanChart");
            var myChart = echarts.init(dom);
            var nodes = [
                {
                    x: 500,
                    y: 1250,
                    nodeName: "应用",
                    svgPath:
                        "M544 552.325V800a32 32 0 0 1-32 32 31.375 31.375 0 0 1-32-32V552.325L256 423.037a32 32 0 0 1-11.525-43.512A31.363 31.363 0 0 1 288 368l224 128 222.075-128a31.363 31.363 0 0 1 43.525 11.525 31.988 31.988 0 0 1-11.525 43.513L544 551.038z m0 0,M64 256v512l448 256 448-256V256L512 0z m832 480L512 960 128 736V288L512 64l384 224z m0 0",
                    symbolSize: 40,
                },
                {
                    x: 100,
                    y: 600,
                    nodeName: "模块1",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 500,
                    y: 600,
                    nodeName: "模块2",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 900,
                    y: 600,
                    nodeName: "模块3",
                    svgPath:
                        "M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z,M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z",
                },
                {
                    x: 0,
                    y: 100,
                    nodeName: "节点1",
                    svgPath:
                        "M887.552 546.10944c-28.16 0-54.21056 8.576-75.97056 23.168l-140.22144-153.6a237.55264 237.55264 0 0 0 79.54944-176.768C750.7712 107.02336 643.8912 0.14336 512 0 380.1088 0.14336 273.2288 107.02336 273.09056 238.91456c0 67.84 28.672 128.768 74.24 172.35456L203.52 564.41856a134.60992 134.60992 0 0 0-67.01056-18.304C61.12256 546.18112 0.03584 607.29856 0 682.68544 0 757.95456 61.25056 819.2 136.50944 819.2c75.38688-0.03584 136.50432-61.12256 136.576-136.51456 0-26.112-7.68-50.176-20.48-70.97344l151.10656-161.024a234.73152 234.73152 0 0 0 74.17856 23.68v281.41056a136.448 136.448 0 0 0-102.4 131.712c0 75.264 61.184 136.50944 136.50944 136.50944 75.3664-0.07168 136.44288-61.14816 136.50944-136.50944 0-63.42144-43.648-116.41856-102.4-131.712V474.368c24.00256-3.456 46.78144-10.17344 67.84-20.29056l152.38656 166.85056c-9.53856 18.688-15.36 39.424-15.36 61.75744 0 75.264 61.184 136.51456 136.576 136.51456 75.41248-2.82624 134.25152-66.2528 131.42528-141.66528-2.68288-71.44448-59.9808-128.7424-131.42528-131.42528z m-751.03744 204.8c-37.69856 1.13664-69.17632-28.50304-70.31808-66.19648S94.69952 615.53664 132.39296 614.4c1.39264-0.04096 2.7904-0.04096 4.18304 0 37.71392 0.01536 68.2752 30.60224 68.25984 68.31616-0.01536 37.69344-30.5664 68.24448-68.25984 68.25984l-0.06144-0.06656z m204.8-512c0.1024-94.21312 76.47232-170.55232 170.68544-170.61888 94.21312 0.07168 170.58304 76.41088 170.68544 170.624C682.61888 333.15328 606.23872 409.52832 512 409.6c-94.23872-0.07168-170.61888-76.44672-170.68544-170.69056z m238.976 648.576c-0.01536 37.71392-30.60736 68.2752-68.32128 68.25472-37.71392-0.01536-68.2752-30.60736-68.25472-68.32128 0.01536-37.71392 30.60224-68.2752 68.31616-68.25984 37.69344 0.01536 68.24448 30.5664 68.25984 68.25984v0.06656z m307.2-136.576c-37.67296-0.03584-68.21888-30.55104-68.29056-68.224 0-37.71392 30.57152-68.28544 68.29056-68.28544 37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z",
                },
                {
                    x: 300,
                    y: 100,
                    nodeName: "节点2",
                    svgPath:
                        "M887.552 546.10944c-28.16 0-54.21056 8.576-75.97056 23.168l-140.22144-153.6a237.55264 237.55264 0 0 0 79.54944-176.768C750.7712 107.02336 643.8912 0.14336 512 0 380.1088 0.14336 273.2288 107.02336 273.09056 238.91456c0 67.84 28.672 128.768 74.24 172.35456L203.52 564.41856a134.60992 134.60992 0 0 0-67.01056-18.304C61.12256 546.18112 0.03584 607.29856 0 682.68544 0 757.95456 61.25056 819.2 136.50944 819.2c75.38688-0.03584 136.50432-61.12256 136.576-136.51456 0-26.112-7.68-50.176-20.48-70.97344l151.10656-161.024a234.73152 234.73152 0 0 0 74.17856 23.68v281.41056a136.448 136.448 0 0 0-102.4 131.712c0 75.264 61.184 136.50944 136.50944 136.50944 75.3664-0.07168 136.44288-61.14816 136.50944-136.50944 0-63.42144-43.648-116.41856-102.4-131.712V474.368c24.00256-3.456 46.78144-10.17344 67.84-20.29056l152.38656 166.85056c-9.53856 18.688-15.36 39.424-15.36 61.75744 0 75.264 61.184 136.51456 136.576 136.51456 75.41248-2.82624 134.25152-66.2528 131.42528-141.66528-2.68288-71.44448-59.9808-128.7424-131.42528-131.42528z m-751.03744 204.8c-37.69856 1.13664-69.17632-28.50304-70.31808-66.19648S94.69952 615.53664 132.39296 614.4c1.39264-0.04096 2.7904-0.04096 4.18304 0 37.71392 0.01536 68.2752 30.60224 68.25984 68.31616-0.01536 37.69344-30.5664 68.24448-68.25984 68.25984l-0.06144-0.06656z m204.8-512c0.1024-94.21312 76.47232-170.55232 170.68544-170.61888 94.21312 0.07168 170.58304 76.41088 170.68544 170.624C682.61888 333.15328 606.23872 409.52832 512 409.6c-94.23872-0.07168-170.61888-76.44672-170.68544-170.69056z m238.976 648.576c-0.01536 37.71392-30.60736 68.2752-68.32128 68.25472-37.71392-0.01536-68.2752-30.60736-68.25472-68.32128 0.01536-37.71392 30.60224-68.2752 68.31616-68.25984 37.69344 0.01536 68.24448 30.5664 68.25984 68.25984v0.06656z m307.2-136.576c-37.67296-0.03584-68.21888-30.55104-68.29056-68.224 0-37.71392 30.57152-68.28544 68.29056-68.28544 37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z",
                },
                {
                    x: 700,
                    y: 100,
                    nodeName: "节点3",
                    svgPath:
                        "M887.552 546.10944c-28.16 0-54.21056 8.576-75.97056 23.168l-140.22144-153.6a237.55264 237.55264 0 0 0 79.54944-176.768C750.7712 107.02336 643.8912 0.14336 512 0 380.1088 0.14336 273.2288 107.02336 273.09056 238.91456c0 67.84 28.672 128.768 74.24 172.35456L203.52 564.41856a134.60992 134.60992 0 0 0-67.01056-18.304C61.12256 546.18112 0.03584 607.29856 0 682.68544 0 757.95456 61.25056 819.2 136.50944 819.2c75.38688-0.03584 136.50432-61.12256 136.576-136.51456 0-26.112-7.68-50.176-20.48-70.97344l151.10656-161.024a234.73152 234.73152 0 0 0 74.17856 23.68v281.41056a136.448 136.448 0 0 0-102.4 131.712c0 75.264 61.184 136.50944 136.50944 136.50944 75.3664-0.07168 136.44288-61.14816 136.50944-136.50944 0-63.42144-43.648-116.41856-102.4-131.712V474.368c24.00256-3.456 46.78144-10.17344 67.84-20.29056l152.38656 166.85056c-9.53856 18.688-15.36 39.424-15.36 61.75744 0 75.264 61.184 136.51456 136.576 136.51456 75.41248-2.82624 134.25152-66.2528 131.42528-141.66528-2.68288-71.44448-59.9808-128.7424-131.42528-131.42528z m-751.03744 204.8c-37.69856 1.13664-69.17632-28.50304-70.31808-66.19648S94.69952 615.53664 132.39296 614.4c1.39264-0.04096 2.7904-0.04096 4.18304 0 37.71392 0.01536 68.2752 30.60224 68.25984 68.31616-0.01536 37.69344-30.5664 68.24448-68.25984 68.25984l-0.06144-0.06656z m204.8-512c0.1024-94.21312 76.47232-170.55232 170.68544-170.61888 94.21312 0.07168 170.58304 76.41088 170.68544 170.624C682.61888 333.15328 606.23872 409.52832 512 409.6c-94.23872-0.07168-170.61888-76.44672-170.68544-170.69056z m238.976 648.576c-0.01536 37.71392-30.60736 68.2752-68.32128 68.25472-37.71392-0.01536-68.2752-30.60736-68.25472-68.32128 0.01536-37.71392 30.60224-68.2752 68.31616-68.25984 37.69344 0.01536 68.24448 30.5664 68.25984 68.25984v0.06656z m307.2-136.576c-37.67296-0.03584-68.21888-30.55104-68.29056-68.224 0-37.71392 30.57152-68.28544 68.29056-68.28544 37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z",
                },
                {
                    x: 1000,
                    y: 100,
                    nodeName: "节点4",
                    svgPath:
                        "M887.552 546.10944c-28.16 0-54.21056 8.576-75.97056 23.168l-140.22144-153.6a237.55264 237.55264 0 0 0 79.54944-176.768C750.7712 107.02336 643.8912 0.14336 512 0 380.1088 0.14336 273.2288 107.02336 273.09056 238.91456c0 67.84 28.672 128.768 74.24 172.35456L203.52 564.41856a134.60992 134.60992 0 0 0-67.01056-18.304C61.12256 546.18112 0.03584 607.29856 0 682.68544 0 757.95456 61.25056 819.2 136.50944 819.2c75.38688-0.03584 136.50432-61.12256 136.576-136.51456 0-26.112-7.68-50.176-20.48-70.97344l151.10656-161.024a234.73152 234.73152 0 0 0 74.17856 23.68v281.41056a136.448 136.448 0 0 0-102.4 131.712c0 75.264 61.184 136.50944 136.50944 136.50944 75.3664-0.07168 136.44288-61.14816 136.50944-136.50944 0-63.42144-43.648-116.41856-102.4-131.712V474.368c24.00256-3.456 46.78144-10.17344 67.84-20.29056l152.38656 166.85056c-9.53856 18.688-15.36 39.424-15.36 61.75744 0 75.264 61.184 136.51456 136.576 136.51456 75.41248-2.82624 134.25152-66.2528 131.42528-141.66528-2.68288-71.44448-59.9808-128.7424-131.42528-131.42528z m-751.03744 204.8c-37.69856 1.13664-69.17632-28.50304-70.31808-66.19648S94.69952 615.53664 132.39296 614.4c1.39264-0.04096 2.7904-0.04096 4.18304 0 37.71392 0.01536 68.2752 30.60224 68.25984 68.31616-0.01536 37.69344-30.5664 68.24448-68.25984 68.25984l-0.06144-0.06656z m204.8-512c0.1024-94.21312 76.47232-170.55232 170.68544-170.61888 94.21312 0.07168 170.58304 76.41088 170.68544 170.624C682.61888 333.15328 606.23872 409.52832 512 409.6c-94.23872-0.07168-170.61888-76.44672-170.68544-170.69056z m238.976 648.576c-0.01536 37.71392-30.60736 68.2752-68.32128 68.25472-37.71392-0.01536-68.2752-30.60736-68.25472-68.32128 0.01536-37.71392 30.60224-68.2752 68.31616-68.25984 37.69344 0.01536 68.24448 30.5664 68.25984 68.25984v0.06656z m307.2-136.576c-37.67296-0.03584-68.21888-30.55104-68.29056-68.224 0-37.71392 30.57152-68.28544 68.29056-68.28544 37.71392 0 68.29056 30.57152 68.28544 68.29056 0 37.68832-30.53568 68.25472-68.224 68.28544l-0.06144-0.06656z",
                },
            ];
            var charts = {
                nodes: [],
                linesData: [
                    {
                        coords: [
                            [500, 1000],
                            [500, 800],
                        ],
                    },
                    {
                        coords: [
                            [500, 800],
                            [100, 800],
                            [100, 600],
                        ],
                    },
                    {
                        coords: [
                            [500, 800],
                            [500, 600],
                        ],
                    },
                    {
                        coords: [
                            [500, 800],
                            [900, 800],
                            [900, 600],
                        ],
                    },
                    {
                        coords: [
                            [100, 600],
                            [0, 300],
                        ],
                    },
                    {
                        coords: [
                            [100, 600],
                            [300, 300],
                        ],
                    },
                    {
                        coords: [
                            [900, 600],
                            [700, 300],
                        ],
                    },
                    {
                        coords: [
                            [900, 600],
                            [1000, 300],
                        ],
                    },
                ],
            };
            for (var j = 0; j < nodes.length; j++) {
                const { x, y, nodeName, svgPath, symbolSize } = nodes[j];
                var node = {
                    nodeName,
                    value: [x, y],
                    symbolSize: symbolSize || 40,
                    symbol: "path://" + svgPath,
                    itemStyle: {
                        color: "#2adf4e",
                    },
                };
                charts.nodes.push(node);
            }
            let option = {
                xAxis: {
                    min: 0,
                    max: 1000,
                    show: false,
                    type: "value",
                },
                yAxis: {
                    min: 0,
                    max: 1000,
                    show: false,
                    type: "value",
                },
                series: [
                    {
                        type: "graph",
                        coordinateSystem: "cartesian2d",
                        label: {
                            show: true,
                            position: "bottom",
                            color: "#2adf4e",
                            formatter: function (item) {
                                return item.data.nodeName;
                            },
                        },
                        data: charts.nodes,
                    },
                    {
                        type: "lines",
                        polyline: true,
                        coordinateSystem: "cartesian2d",
                        lineStyle: {
                            type: "dashed",
                            width: 2,
                            color: "#175064",
                            curveness: 0.3,
                        },
                        effect: {
                            show: true,
                            trailLength: 0.1,
                            symbol: "arrow",
                            color: "#2adf4e",
                            symbolSize: 8,
                        },
                        data: charts.linesData,
                    },
                ],
            };
            myChart.setOption(option);
        }
        onMounted(() => {
            //drawChart();
        });
        return {
            title,
            centerList,
            rightList,
            yuanList,
        };
    },
};
</script>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .rightTwo {
        .yuanList {
            width: vw(364);
            height: vh(87);
            background: url('/data/images/sjhj/rightThree.png') no-repeat;
            background-size: 100% 100%;
            margin-top: vh(20);
            margin-bottom: vh(20);
            display: flex;
            justify-content: space-around;

            div {
                div {
                    height: vh(43);
                    line-height: vh(43);
                    text-align: center;
                }

                div:nth-child(1) {
                    font-size: vw(16);
                }

                div:nth-child(2) {
                    color: rgba(255, 188, 50, 1);
                    font-size: vw(18);
                }
            }
        }

        #yuanChart {
            width: 100%;
            height: vh(230);
            margin-top: vh(5);
            display: flex;
            flex-direction: column;
            align-items: center;

            // justify-content:space-around
            .leftContent {
                width: vw(190);
                height: vh(26);
                line-height: vh(26);
                font-size: vw(15);
                background: #03587e;
                border: 1px solid #1398cf;
                text-align: center;
            }

            .rightCenterLine {
                width: vw(1);
                height: vh(20);
                background: #626262;
            }

            .centerContent {
                width: 75%;
                height: vh(1);
                background: #626262;
            }

            .centerRightLine {
                display: flex;
                width: 100%;
                justify-content: space-around;

                div {
                    width: vw(1);
                    height: vh(20);
                    background: #626262;
                }
            }

            .rightContent {
                display: flex;
                justify-content: space-around;
                width: 100%;

                div {
                    width: vw(25);
                    height: vh(100);
                    font-size: vw(12);
                    box-sizing: border-box;
                    padding-top: vh(2);
                    line-height: vh(18);
                    text-align: center;
                    background: #03587e;
                    border: 1px solid #1398cf;
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .rightTwo {
        .yuanList {
            width: vw1(414);
            height: vh(180);
            background: url('/data/images/sjhj/rightThree.png') no-repeat;
            background-size: 100% 100%;
            margin-top: vh(20);
            margin-bottom: vh(20);
            float: left;
            display: flex;
            justify-content: space-around;

            div {
                div {
                    height: vh(43);
                    line-height: vh(43);
                    text-align: center;
                }

                div:nth-child(1) {
                    font-size: vw1(16);
                }

                div:nth-child(2) {
                    color: rgba(255, 188, 50, 1);
                    font-size: vw1(18);
                }
            }
        }

        #yuanChart {
            width: vw1(414);
            height: vh(230);
            margin-top: vh(5);
            float: left;
            display: flex;
            flex-direction: column;
            align-items: center;

            // justify-content:space-around
            .leftContent {
                width: vw1(190);
                height: vh(26);
                line-height: vh(26);
                font-size: vw1(15);
                background: #03587e;
                border: 1px solid #1398cf;
                text-align: center;
            }

            .rightCenterLine {
                width: vw1(1);
                height: vh(20);
                background: #626262;
            }

            .centerContent {
                width: 75%;
                height: vh(1);
                background: #626262;
            }

            .centerRightLine {
                display: flex;
                width: 100%;
                justify-content: space-around;

                div {
                    width: vw1(1);
                    height: vh(20);
                    background: #626262;
                }
            }

            .rightContent {
                display: flex;
                justify-content: space-around;
                width: 100%;

                div {
                    width: vw1(25);
                    height: vh(100);
                    font-size: vw1(12);
                    box-sizing: border-box;
                    padding-top: vh(2);
                    line-height: vh(18);
                    text-align: center;
                    background: #03587e;
                    border: 1px solid #1398cf;
                }
            }
        }
    }
}
</style>